<template>
	<view class="page-container">
		<u-navbar bgColor="#eeeeee" :placeholder="true" :leftIconSize="0">
		</u-navbar>
		<div class="promission-mode">
			<u-cell title="蓝牙权限" :border="false">
				<img class="promission" style="width: 28rpx;height: 48rpx; margin: 0 11rpx;" slot="icon"
					src="../../static/img/icon-ble.png" />
				<!-- <u-badge count="99" :absolute="false" slot="right-icon"></u-badge> -->
				<u-switch :space="3" slot="right-icon" inactiveColor="#eeeeee" activeColor="linear-gradient(to right, #00107d , #8acbf1)" v-model="checked"></u-switch>
			</u-cell>
			<div class="text-tip" style="margin-top: 20rpx; margin-bottom: 30rpx;">
				# 蓝牙 # 设定开启时，此设备可被手机侦测。
			</div>
			<u-cell title="位置权限" :border="false">
				<img class="promission" style="width: 40rpx;height: 40rpx;" slot="icon"
					src="../../static/img/icon-poi.png" />
				<!-- <u-badge count="99" :absolute="false" slot="right-icon"></u-badge> -->
				<u-switch :space="3" slot="right-icon" inactiveColor="#eeeeee" activeColor="linear-gradient(to right, #00107d , #8acbf1)" v-model="checked"></u-switch>
			</u-cell>
		</div>
		<div class="main-container">
			<div class="text-tip">
				# 蓝牙列表
			</div>
			<div class="ble-container">
				<view v-for="(item, index) in deviceListDataShow" :key="item.id" class="list-item"
					hover-class="list-item-hover" hover-start-time="0" hover-stay-time="100"
					@click="listViewTap(item.id)">
					<image v-if="item.manufacturer==='eciot'" src="/static/img/ecble.png" class="list-item-img"></image>
					<image v-else src="/static/img/icon-ble.png" class="list-item-img"></image>
					<text class="list-item-name u-line-1">{{item.name}}</text>
					<image v-if="item.rssi >= -41" src="/static/img/s5.png" mode="aspectFit" class="list-item-rssi-img">
					</image>
					<image v-else-if="item.rssi >= -55" src="/static/img/s4.png" mode="aspectFit"
						class="list-item-rssi-img"></image>
					<image v-else-if="item.rssi >= -65" src="/static/img/s3.png" mode="aspectFit"
						class="list-item-rssi-img"></image>
					<image v-else-if="item.rssi >= -75" src="/static/img/s2.png" mode="aspectFit"
						class="list-item-rssi-img"></image>
					<image v-else="item.rssi < -75" src="/static/img/s1.png" mode="aspectFit"
						class="list-item-rssi-img"></image>
					<text class="list-item-rssi">{{item.rssi}}</text>
					<view class="list-item-line"></view>
				</view>
				<view v-if="deviceListDataShow.length==0" class="gap"></view>
				<view v-if="deviceListDataShow.length==0" class="notice"> - 未发现设备，请确认蓝牙是否打开 -</view>
				<view class="gap" v-if="deviceListDataShow.length==0" ></view>
			</div>
			<view class="gap" style="height: 20px;"></view>
		</div>
	</view>

</template>

<script>
	// #ifdef APP
	import ecUI from '../../utils/ecUI.js'
	import ecBLE from '../../utils/ecBLE/ecBLE.js'
	// #endif   
	// #ifdef MP
	const ecUI = require('../../utils/ecUI.js')
	const ecBLE = require('../../utils/ecBLE/ecBLE.js')
	// #endif
	let ctx
	let deviceListData = []
	export default {
		data() {
			return {
				deviceListDataShow: [],
				checked: true
			}
		},
		onLoad() {
			ctx = this
			console.log(uni.$u.config.v);
			setInterval(() => {
				ctx.deviceListDataShow = JSON.parse(JSON.stringify(deviceListData))
				// ctx.deviceListDataShow = [
				// 	{
				// 		id: 1,
				// 		name: '测试测试测试测试测试测试测试测试测试测试测试',
				// 		rssi: -60
				// 	},{
				// 		id: 2,
				// 		name: '测试测试测试测试测试测试测试测试测试测试测试',
				// 		rssi: -60
				// 	},
					
				// ]
			}, 800)
		},
		onShow() {
			setTimeout(() => {
				ctx.openBluetoothAdapter()
			}, 100)
		},
		methods: {
			navHandler() {
				uni.navigateTo({
					url: '/pages/choose-mode/choose-mode',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			listViewTap(id) {
				ecUI.showLoading('设备连接中')
				ecBLE.onBLEConnectionStateChange(res => {
					ecUI.hideLoading()
					if (res.ok) {
						ecBLE.stopBluetoothDevicesDiscovery()
						uni.navigateTo({
							// url: '../device/device'
							url: '/pages/choose-mode/choose-mode'
						})
					} else {
						ecUI.showModal(
							'提示',
							'连接失败,errCode=' + res.errCode + ',errMsg=' + res.errMsg
						)
					}
				})
				ecBLE.createBLEConnection(id)
			},
			openBluetoothAdapter() {
				ecBLE.onBluetoothAdapterStateChange(res => {
					if (res.ok) {
						console.log('Bluetooth adapter ok')
						ctx.startBluetoothDevicesDiscovery()
					} else {
						ecUI.showModal(
							'提示',
							`Bluetooth adapter error | ${res.errCode} | ${res.errMsg}`,
							() => {

							}
						)
					}
				})
				ecBLE.openBluetoothAdapter()
			},
			startBluetoothDevicesDiscovery() {
				console.log('start search')
				ecBLE.onBluetoothDeviceFound(res => {
					// if(res.id==="EC:22:05:13:78:49")
					// console.log(`id:${res.id},name:${res.name},rssi:${res.rssi}`)
					for (const item of deviceListData) {
						if (item.id === res.id) {
							item.name = res.name
							item.rssi = res.rssi
							return
						}
					}
					let manufacturer = ''
					if (res.name.length === 11 && res.name.startsWith('@')) {
						manufacturer = 'eciot'
					}
					if (res.name.length === 15 && res.name.startsWith('BT_')) {
						manufacturer = 'eciot'
					}
					deviceListData.push({
						id: res.id,
						name: res.name,
						rssi: res.rssi,
						manufacturer,
					})
				})
				ecBLE.startBluetoothDevicesDiscovery()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page-container {
		min-height: 100vh;
		background-color: #efefef;
		padding: 0 45rpx;
	}

	.main-container {
		padding-top: 60rpx;
		.ble-container {
			background-color: #fff;
			border-radius: 5px;
			padding: 20rpx 0;
			margin-top: 20rpx;
			.list-item {
				&:last-child {
				.list-item-line {
					display: none;
				}
			}
			}
		}
	}

	.text-tip {
		font-size: 20rpx;
		padding-left: 30rpx;
		color: #302a37;
	}

	.promission-mode {
		/deep/.u-cell {
			background-color: #fff;
			border-radius: 5px;
			.u-cell__body{
				padding: 12px 15px !important;
			}
			.u-cell__title-text {
				font-size: 18px;
			}
		}
	}

	.list-item {
		height: 57px;
		position: relative;
	}

	.list-item-hover {
		background-color: #e5e4e9;
	}

	.list-item-img {
		position: absolute;
		width: 14px;
		height: 24px;
		left: 20px;
		top: 15px;
	}

	.list-item-name {
		position: absolute;
		font-size: 14px;
		left: 45px;
		top: 0px;
		line-height: 56px;
		width: 70%;
	}

	.list-item-rssi-img {
		position: absolute;
		width: 20px;
		height: 20px;
		right: 20px;
		top: 13px;
	}

	.list-item-rssi {
		position: absolute;
		width: 40px;
		height: 20px;
		right: 10px;
		top: 33px;
		font-size: 12px;
		font-weight: bold;
		display: flex;
		justify-content: center;
	}

	.list-item-line {
		position: absolute;
		height: 1px;
		left: 20px;
		right: 20px;
		top: 56px;
		background-color: #d6d7d9;
		transform: scaleY(0.5);
	
	}

	.notice {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 13px;
		color: #909399;
		height: 100%;
	}

	.gap {
		height: 57px;
	}
</style>